<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>flex弹性布局</title>
	<style>
		.container {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
		}
		.container:after{
			/* content:'';
			
			width: 480px;
			height: 0;
			display: block; */
		}
		.box {
			width: 480px;
			height: 100px;
			background-color: red;
			margin-bottom: 10px;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="box">1</div>
		<div class="box">2</div>
		<div class="box">3</div>
		<div class="box">3</div>
		<div class="box">3</div>
		<div class="box">3</div>
		<div class="box">3</div>
		<div class="box">3</div>
		<div class="box">3</div>
		<div class="box">3</div>
		<div class="box">3</div>
	</div>
</body>
